<template>
	<view class="content">
		<view class="swiper">
			<view class="swiper-con">
				<uv-swiper :list="list3" indicator indicatorMode="line" circular height="195" radius="8"></uv-swiper>
			</view>
		</view>

		<view class="tab">
			<view class="tab-item" hover-class="activeM" v-for="(item,index) in 4" :key="index">
				<image src="/static/images/quequanquanbu.png" mode="widthFix"></image>
				后台上传
			</view>
			<view class="tab-item" hover-class="activeM" @click="goMore">
				<image src="/static/images/paimaigengduo.png" mode="widthFix"></image>
				更多
			</view>
		</view>

		<view class="content-box1">
			<view :class="['content-box1-item',tabCurrent == item.id ? 'activeTab' : '']"
				v-for="(item,index) in tabList" :key="index" @click="clickTab(item.id)">
				{{item.name}}
				<view class="active-line" v-if="tabCurrent == item.id"></view>
			</view>
		</view>

		<view class="shop-box" v-for="(item,index) in 10" :key="index" @click="goDetail(item)">
			<view class="shop-box-l">
				<image src="/static/images/ceshitupian.png" mode="widthFix"></image>
			</view>
			<view class="shop-box-r">
				<view class="text1">
					<view class="text1-l">
						拍卖
					</view>
					<view class="text1-r">
						vase 谷烧手作vase 谷烧手作vase 谷烧手作
					</view>
				</view>

				<view class="text2">
					<view class="text2-l">
						起拍价:￥100.00
					</view>
					<view class="text2-l">
						保证金:￥100.00
					</view>
				</view>

				<view class="text3">
					<view class="text3-l">
						当前价:
					</view>
					<view class="text3-m">
						<span style="font-weight: 400;font-size: 24rpx;margin-top: 2rpx;">￥</span>589.00
					</view>
					<view class="text3-r">
						(出价1686次)
					</view>
				</view>

				<view class="text4">
					<view class="text4-l">
						进行中
					</view>
					<view class="text4-l">
						距离结束：11时32分58秒
					</view>
				</view>
				
				<view class="text5">
					<view class="text5-l">
						起拍价:￥100.00
					</view>
					<view class="text5-l">
						保证金:￥100.00
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		baseUrl,
		http
	} from '@/utils/request'
	import emitter from '@/utils/emitter.js'
	import {
		showMsg
	} from '@/utils/showMsg'

	const list3 = ref([
		'https://picsum.photos/id/1011/600/800', 'https://picsum.photos/id/1012/600/800',
		'https://picsum.photos/id/1013/600/800'
	])

	const tabList = ref([{
		id: 1,
		name: '今日拍卖'
	}, {
		id: 2,
		name: '近期预告'
	}, {
		id: 3,
		name: '已结束拍品'
	}])

	const tabCurrent = ref(1)
	const clickTab = (id) => {
		tabCurrent.value = id
	}
	
	const goMore = () => {
		uni.navigateTo({
			url:'/subpackages/home/pmFl'
		})
	}
	
	const goDetail = () => {
		uni.navigateTo({
			url:'/subpackages/home/pmDetail'
		})
	}
</script>

<style lang="scss" scoped>
	.swiper {
		width: 100%;
		padding: 0rpx 30rpx;

		.swiper-con {
			width: 100%;
			height: 390rpx;
		}
	}

	.tab {
		width: 100%;
		margin-top: 26rpx;
		padding: 0rpx 30rpx;
		display: flex;
		gap: 20rpx;

		.tab-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-weight: 400;
			font-size: 24rpx;
			color: #182033;
			gap: 10rpx;

			image {
				width: 120rpx !important;
				height: 120rpx !important;
				border-radius: 60rpx !important;
			}
		}
	}

	.content-box1 {
		width: 100%;
		height: 96rpx;
		background: #FFFFFF;
		display: flex;
		margin-top: 30rpx;

		.content-box1-item {
			position: relative;
			width: 33.33%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 400;
			font-size: 30rpx;
			color: #9095A8;
		}

		.activeTab {
			font-weight: 600;
			color: #333;
		}

		.active-line {
			position: absolute;
			bottom: 10rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 70rpx;
			height: 8rpx;
			background-color: #e90d00;
			border-radius: 4rpx;
		}
	}

	.shop-box {
		width: 100%;
		padding: 0rpx 30rpx;
		display: flex;
		margin-top: 20rpx;

		.shop-box-l {
			width: 240rpx;

			image {
				width: 240rpx !important;
				height: 286rpx !important;
				border-radius: 8rpx !important;
			}
		}

		.shop-box-r {
			width: calc(100% - 240rpx);
			padding-left: 20rpx;

			.text1 {
				width: 100%;
				display: flex;
				align-items: center;

				.text1-l {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 60rpx;
					height: 36rpx;
					background: linear-gradient(270deg, #A14B01 0%, #271D05 100%);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFF7ED;
				}

				.text1-r {
					width: calc(100% - 60rpx);
					padding-left: 10rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: 600;
					font-size: 30rpx;
					color: #182033;
				}
			}

			.text2 {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-top: 24rpx;

				.text2-l {
					font-weight: 400;
					font-size: 24rpx;
					color: #50535C;
				}
			}

			.text3 {
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 10rpx;

				.text3-l {
					font-weight: 400;
					font-size: 24rpx;
					color: #50535C;
				}

				.text3-m {
					font-weight: 600;
					font-size: 32rpx;
					color: #E90D00;
				}

				.text3-r {
					font-weight: 400;
					font-size: 24rpx;
					color: #9095A8;
					margin-left: 10rpx;
				}

			}

			.text4 {
				width: 100%;
				height: 48rpx;
				background: linear-gradient(90deg, #E90D00 0%, #FF6B62 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0rpx 20rpx;
				margin-top: 20rpx;

				.text4-l {
					font-weight: 600;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
			
			.text5 {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-top: 24rpx;
			
				.text5-l {
					font-weight: 400;
					font-size: 24rpx;
					color: #50535C;
				}
			}
		}
	}
</style>